<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
${aier_doctype}
<html <s:property value="aier-html-xmlns" escape="false"/>>
<head>
<meta http-equiv="Content-Type" content="${aier_content_type}" />
<meta name="keywords" content="${aier_keyworks}" />
<meta name="description" content="${aier_description}" />
<title>${aier_title}</title>
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}ui.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/jq.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/multiselect.css" />
<link rel="stylesheet" href="${aier_css_url}jc/chosen.css">

<link rel="stylesheet" href="${aier_css_url}social/module/reset.css" />
<link rel="Stylesheet" href="${aier_css_url}social/module/emotion.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/jq-msg.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/reset.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/xxs.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/btn.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/uploadphoto.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/homeside.css" />
<link rel="stylesheet" href="${aier_css_url}social/user/relationship/relationship.css">

<script type="text/javascript" src="${aier_js_url}j.js"></script>
<script type="text/javascript" src="${aier_js_url}b.js"></script>
<script type="text/javascript" src="${aier_js_url}${aier_jqui_js}ui.js"></script>
<script type="text/javascript" src="${aier_js_url}97/WdatePicker.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/msg.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/cn.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/jq.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/ja.js"></script>
<script type="text/javascript" src="${aier_js_url}jc/cj.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/block.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/multiselect.js"></script>
</head>
<body>

	<!-- 顶栏 -->
	<s:action name="userhomecomm_homeHead" namespace="/user" executeResult="true"></s:action>
	<!-- 顶栏结束 -->


	<div class="window-content">

		<!-- wrap  -->
		<div class="wrap wrap-relationship clearfix">

			<!-- 主侧栏 -->
			<div class="home-side">

				<!-- 分组1  关注组 -->
				<div class="group-mycf">

					<fieldset class="title-fieldset">
						<legend>关系中心</legend>
					</fieldset>
					<div class="tab-normal">
						<a class="btn" href="${aier_url}user/usermyfollow.shtml">
							<em class="icon-1 icon-1-teguan"></em>
							<span>关注</span>
						</a>
					</div>
					<div class="tab-small">
						<a class="btn" href="${aier_url}user/usermyfollow.shtml">
							全部关注（<span id = "allfollow"></span>）
						</a>
					</div>
					<div id = "group"></div>

					<!-- 创建分组 -->
					<div class="create-group">
						<a href="javascript:void(0);" class="btn btn-normal-orange" id="createGroup">
							<span>创建分组</span>
						</a>

					</div>
				</div>
				<!--  -->

				<!-- 分组2  密友圈组 -->
				<div class="group-mycf">
					<div class="tab-normal current">
						<a class="btn" href="${aier_url}user/userchumscircle.shtml">
							<em class="icon-1 icon-1-teguan"></em>
							<span>密友圈</span>
						</a>
					</div>
				</div>
				<!--  -->				

				<!-- 分组3  粉丝组 -->
				<div class="group-myfans">
					<div class="tab-normal">
						<a class="btn" href="${aier_url}user/usermyfans.shtml">
							<em class="icon-1 icon-1-teguan"></em>
							<span>粉丝</span>
						</a>
					</div>
				</div>
				<!--  -->	

				<!-- 分组4  找人 -->
				<div class="group-find">
					<div class="tab-normal">
						<a class="btn" href="${aier_url}user/lookup_findPeople.shtml">
							<em class="icon-1 icon-1-zhaoren"></em>
							<span>找人</span>
						</a>
					</div>
				</div>
				<!--  -->	
				
			</div>
			<!-- 左侧栏结束 -->


			<!-- 主区域 (右  -->
			<div class="main-area">
				<div class="mycf-content">
					<div class="topbar">
						<div class="title">
							<span class="title-a">密友圈（<em id="cfriend"></em>个）</span>
						</div>
						<div class="title-bottom">
							 把你关心的亲密好友添加为密友，集中获取他们的信息、动态更新，与他们分享你的私密照片、信息。
						</div>
					</div>

					<div class="navbar">
						<div class="control">
							<a href="javascript:void(0);" class="btn btn-active btn-normal-white close" id="triggerSCF">
								<span>添加密友
									<em class="select-arrow">
										<em class="down">◆</em>
									</em>
								</span>
							</a>
								
							<a href="javascript:void(0);" class="btn btn-orange-2 btn-disabled" id="addToGroup">
								<span>添加到
								</span>
							</a>
							<a href="javascript:void(0);" class="btn btn-orange-2 btn-disabled" id="cancleFollow">
								<span>取消密友
								</span>
							</a>
							<div class="tip" id="sumTip" style="display:none">
								已经选择<span></span>人 <a href="javascript:void(0);">取消</a>
							</div>
						</div>

						<!--<div class="search">
							<div class="search-inner">
								<input type="text" placeholder="输入昵称或备注">
								<div class="btn btn-search">
									<a href="javascript:void(0);">
										<em class="icon-1 icon-1-search-2"></em>
									</a>
								</div>
							</div>
						</div>  end search -->
					</div> <!--end navbar -->

					<div class="list-area clearfix">
						<div class="clearfix" id = "friendList">

						</div>
						
					</div>

				</div>
				<!-- myfans func over -->
				<div id = "page"></div>
			</div>
			<!-- 主区域结束 -->

		</div>
		<!--  wrap end -->
		<!-- footer copyright -->
		<s:action name="userhomecomm_homeFooter" namespace="/user" executeResult="true"></s:action>
		<!-- /footer copyright -->
	</div>
	<!-- win content end -->
	

<div class="dialog" id="letterDialog" title="私信" style="display:none;">


        <div>
            <div class="letter-content">
                <textarea id="letterTextarea"></textarea>
            </div>
            <div class="clearfix">
                <a class="btn-emotion"><i class="icon-1 icon-1-emotion" style="width:22px;height:22px;"></i></a>
            </div>
        </div>

</div>


<div class="dialog" id="remarkNameDialog" title="设置备注名称" style="display:none;">
	<div>
		<label for="remarkNameInput">设置备注名</label>
		<input type="text" id="remarkNameInput">
	</div>

</div>

<div class="dialog" id="cancelChumsDialog" title="取消密友" style="display:none;">
	确认要取消对<span id="cancelChumsName"></span>的密友关系吗?
	
	<div class="">
		<label>
			<input type="checkbox" id="cancelFollow" />
			<span>同时取消关注</span>
		</label>
	</div>

</div>

<div id="createGroupDialog" title="创建分组" style="display:none;">

	<div>
		<label for="createGroup">创建分组</label>
		<input type="text" id="groupName">
	</div>

</div>


<div id="dialogApplyForCF" title="" style="display:none;">

	<div>
		<label for="textApplyCF">说点什么吧</label>
		<textarea id="textApplyCF"></textarea>
	</div>

</div>


<!-- 触发层，absolute模式 -->
<div class="layer-trigger-absolute">
	<!-- 添加密友框 -->
	
	<div id="searchCF">
		<div class="search">
			<input type="text" id="inputSCF" data-ph="请输入已关注好友的昵称">
		</div>
		
		<div class="list-friend">
		 
			<!--<div class="item-friend" data-uid="">
				<div class="avatar">
					<img src="${get_picturl_url}small/1.jpg">
				</div>
				
				<div class="info">
					<div class="nickname">宇宙天才</div>
					<div class="signature">哈哈哈</div>
				</div>
			</div> -->
		
		</div>
	</div>
</div>

<script>
var page = 1;
var page_size = 18;

var cancelFollowObject;

    $(document).ready(function() {
        searchFollowGroup();
        searchFriend(page);
        searchFollowNotFriend();
    });
    
    // 获取分组列表以及每个分组的人数
    function searchFollowGroup() {
        var fun=function(data){
               if(data.s==1){
                   $("#allfollow").text(data.followCount);
                  
                   var html = "";
                   fgList = data.fgList;
                   if (data.fgList != null && data.fgList.length != 0) {
                       for (var i=0;i<data.fgList.length;i++) {
                            var fg = data.fgList[i];
                            
                            html += '<div class="tab-small"><a class="btn" href="${aier_url}${aier_uri}usermyfollow${aier_suffix}?fgid='+fg.fgid+'">'+fg.name+' （<span>'+fg.count+'</span>）</a></div>';
                            
                       }
                   }
                   
                   $("#group").html(html);
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_searchFollowGroup${aier_suffix}"),
                fun,{
                    
           });
    }
    
    // 查询所有密友
    function searchFriend(nowpage) {
    
        page = nowpage;
        var fun=function(data){
            if(data.s==1){
                if (data.friendList != null && data.friendList.length > 0) {
                    $("#cfriend").text(data.friendList.length);
                    appendList(data.friendList);
                } else {
                    $("#cfriend").text(0);
                    $("#friendList").html("");
                }
                clearSelect();
                // 更新分页显示
                page = data.page;
                toLoadPage(page, page_size, data.page_count, data.count, "page", "searchFriend", null, null);  
                if (data.count == 0) {
                    $("#page").css("display","none");
                } else {
                    $("#page").css("display","block");
                }
            } else {
                $().message("删除失败，请稍后再试！"); 
            }
        };
        exeAjax(
             ajaxUrl("${aier_url}${aier_urijs}userchumscircle_searchAllFriend${aier_suffix}"),
             fun,{
                 "page":page,
                 "page_size":page_size,
                
        });
    }
    
    function appendList(friendList) {
    
        var html = "";
        for (var i=0;i<friendList.length;i++) {
            var fr = friendList[i];
            html += '<div class="list-item" data-uid="'+fr.auid+'"><div class="top"><div class="avatar"><a href="${aier_url}user/uccomm_userCenter.shtml?in_uid='+fr.auid+'"><img src="${get_picturl_url}small/'+fr.headimg+'" alt=""></a></div>';
            if (!isnull(fr.remark)) {
                html += '<div class="namebar"><div class="name"><a>'+fr.remark+'</a></div>';
            } else {
                html += '<div class="namebar"><div class="name"><a>'+fr.nickname+'</a></div>';
            }
            html += '<div class="relationship"><a><em class="icon-1 icon-1-huguan"></em><span>'+fr.followStr+'</span></a></div><div class="group"><a class="change-group">'+fr.stateStr+'</a></div></div></div><div class="bottom">';
            if (!isnull(fr.desinfo)) {
                if (fr.desinfo.length > 16 ) {
                    html += '<div class="intro"><span>简介:</span><span>'+fr.desinfo.substring(0,15)+'...</span></div>';
                } else {
                    html += '<div class="intro"><span>简介:</span><span>'+fr.desinfo+'</span></div>';
                }
            }
            html += '<div class="follow-way">';
            if (fr.followStr == "互相关注") {
                html += '<a class="send-letter">发私信</a><span>|</span>';
            }
            html += '<a class="remark-name">设置备注</a><span>|</span><a class="cancel-chums">取消密友</a></div></div><div class="btn btn-select"><a href="javascript:void(0);"><em class="icon"></em></a></div></div>';
        }
        $("#friendList").html(html);
        
        $(".list-item").click(changeSelect);
        $('#sumTip>a').click(clearSelect);
        // 取消密友
        $('.cancel-chums').click(function(){
		    var auidStr = $(this).closest(".list-item").attr("data-uid");
		    calcelChums(auidStr);
		
		});
		
		// 发私信
		$(".send-letter").click(function(){
		    var ruid = $(this).closest(".list-item").attr("data-uid");
		    sendLetter(ruid);
		});
		
		// 修改备注名
		$('.remark-name').click(function() {
		    var remarkObject = $(this).parents('.list-item').attr('data-uid');
		    var remarknameDom =$(this);
		    //  设置或修改备注名
		    $('#remarkNameDialog').dialog({
		        //背景变暗
		        modal: true,
		        autoOpen : false,
		        show : "fade",
		        hide : "fade",
		        width : "300",
		        height : "200",
		        buttons: {
		            "确定": function() {
		               var remark = $("#remarkNameInput").val();
		               if (isnull(remark)) {
		                  $().message("请输入备注名称！");
		                  return;
		               }
		               var fun=function(data){
		                   $("#remarkNameDialog").dialog("close");
		                   if(data.s==1){
		                       $("#remarkNameInput").val("");
		                       // 修改备注
		                       remarknameDom.parents('.list-item').find(".name>a").html(remark);
		                   } else {
		                      $().message("修改失败，请稍后再试！");
		                   }
		               };
		               exeAjax(
		                    ajaxUrl("${aier_url}${aier_urijs}userchumscircle_updateRemark${aier_suffix}"),
		                    fun,{
		                        "auid":remarkObject,
		                        "remark":remark
		               });
		    
		            },"取消": function() {
		                $( this ).dialog( "close" );
		            }
		        }
		    });
		    $('#remarkNameDialog').dialog('open');
		});

    }

// 切换箭头的up和down

$('#triggerSCF').click(function(){
	if ($(this).hasClass('open')) {
		$(this).removeClass('open').addClass('close');
		$(this).find('.select-arrow em').removeClass('up').addClass('down');
		$('#searchCF').hide();
		$('.list-friend').html('');
	} else {
		$(this).removeClass('close').addClass('open');
		$(this).find('.select-arrow em').removeClass('down').addClass('up');
		startSearchCF();
	}
});


//选择!!!!!

$(".list-item").click(changeSelect);
$('#sumTip>a').click(clearSelect);

var selectArr = new Array();

function changeSelect() {
var thisUid = $(this).attr("data-uid");
if ($(this).hasClass('selected')) {
	$(this).removeClass('selected');
	selectArr = $.grep(selectArr, function(value){
		return value != thisUid;
	});

} else {
	$(this).addClass('selected');

	selectArr = $.unique(selectArr);
	selectArr.push(thisUid);
};

var selectSum = selectArr.length;
if (selectSum>0) {
	$('#sumTip').show();
	$('#sumTip>span').text(selectSum);
	$('#cancleFollow,#addToGroup').removeClass('btn-disabled');
} else {
	clearSelect();
}
};

function clearSelect() {
$('#sumTip').hide();
$(".list-item").removeClass('selected');
$('#cancleFollow,#addToGroup').addClass('btn-disabled');
selectArr.splice(0);
}




// 查找密友
function startSearchCF() {
	var thisobj = $('#searchCF');
	var trigger = $('#triggerSCF');
	thisobj.css({
        top: trigger.offset().top + trigger.height() + 8,
        left: trigger.offset().left
    }).show();
	$('#inputSCF').val($('#inputSCF').attr('data-ph'));
}

    var followList = null;    
    // 查找可添加密友的列表
    function searchFollowNotFriend() {
        var fun=function(data){
            if(data.s==1){
                followList = data.followList;
            }
        };
        exeAjax(
             ajaxUrl("${aier_url}${aier_urijs}userchumscircle_searchFollowNotFriend${aier_suffix}"),
             fun,{
        });
    
    }



$('#inputSCF').focus(function(){
	//ajax 获取好友列表
	
	if ($('#inputSCF').val() == $('#inputSCF').attr('data-ph')) {
		$('#inputSCF').val('');
	}

	$('#inputSCF').live('input',function(){
		var keyword = $(this).val();
		var list = $('.list-friend');
		var avatarPath = '${get_picturl_url}small/'; // ${get_picturl_url}/small/
		if (keyword.length) {
			findCloseFriend(keyword,list,followList,avatarPath);// 4个参数都要传
			dialogApplyForCF();//打开邀请密友对话框
		} else {
			list.html('');
		}
	});

});


$('#inputSCF').blur(function(){
	if ($('#inputSCF').val() == '') {
		$('#inputSCF').val($('#inputSCF').attr('data-ph'));// 显示placeholder （默认关键词，被点击后消失
	}
});



function findCloseFriend(keyword,list,followList,avatarPath) {
	var nPos;
	var vResult = [];

	if (!isnull(followList)) {
	   for(var i in followList) {
	        var sTxt = '';
	        if (!isnull(followList[i].nickname)) {
	           sTxt = followList[i].nickname;
	        }
	        if (!isnull(followList[i].remark)) {
	           sTxt += '(' + followList[i].remark + ')';
	        }
	        //var sTxt=followList[i].nickname||'';
	        nPos=sTxt.indexOf(keyword);
	        if(nPos>=0) {
	            vResult[vResult.length] = followList[i];
	        }
	    }
	}
	
	if (vResult.length == 0) {
		list.html('<div style="margin:8px 10px;text-align:center;color:#ff6666;">未找到相关好友</div>');
	} else {
		sCallback(vResult,avatarPath);
	}
		
	function sCallback(vResult,avatarPath) {
		list.html('');
		var htmlTpl='<div class="item-friend" data-uid=""><div class="avatar"><img src=""></div><div class="info"><div class="nickname"></div><div class="signature"></div></div></div>'; // 这是一个模版
		for (var i = 0; i < vResult.length && i < 10; i++) {
			list.append(htmlTpl);
			var target = list.children('.item-friend').last();
			// 从这里开始填内容（拼html）
			target.attr('data-uid',vResult[i].fuid);
			target.find('.avatar>img').attr('src',avatarPath+vResult.headimg);
			if (!isnull(vResult[i].remark)) {
			    target.find('.nickname').html(vResult[i].nickname + '('+ vResult[i].remark +')');
			} else {
			    target.find('.nickname').html(vResult[i].nickname);
			}
			if (!isnull(vResult[i].desinfo)) {
			    target.find('.signature').html(vResult[i].desinfo);
			}
			 
		};
	

	}

	function find(sFind, sObj) { //可以用indexOf() 替代
		var nSize = sFind.length;
		var nLen = sObj.length;

		var sCompare;

		if(nSize <= nLen ) {
			for(var i = 0; i <= nLen - nSize + 1; i++) {
				sCompare = sObj.substring(i, i + nSize);
				if(sCompare == sFind) {
					return i;
				}
			}
		}
		return -1; // 没找到
	}
} // findCloseFriend -END-

// 添加密友
function dialogApplyForCF(){
	$('#searchCF .item-friend').click(function(){
		var auid = $(this).attr('data-uid'); //获取UID
		var title = '邀请'+$(this).find('.nickname').text()+'成为密友'; //改变dialog标题
		$('#dialogApplyForCF').attr('title',title);
        
		$('#dialogApplyForCF').dialog({
			modal: true,
			autoOpen : false,
			show : "fade",
			hide : "fade",
			width : "600",
			height : "400",
			buttons: {
			    "确定": function() {
			       var content = $("#textApplyCF").val();
			       if (content.length > 200) {
			            $().message("内容太长！");
			            return;
			       }
			       var fun=function(data){
			           if (data.s == 1) {
			               $("#dialogApplyForCF").dialog("destroy"); //注意，不能用close
			               searchFriend(page);
			               searchFollowNotFriend();
			               $("#textApplyCF").val("");
			           } else if (data.s == 10001){
			               $().message("已添加为密友！");
			               $("#textApplyCF").val("");
			               $("#dialogApplyForCF").dialog("destroy"); //注意，不能用close
			           } else {
			               $().message("添加失败，请稍后再试！");
			           }
			           
				        
			       };
			       exeAjax(ajaxUrl("${aier_url}${aier_urijs}userchumscircle_addFriend${aier_suffix}"),
			       fun,{
			           "auid":auid,
			           "content":content
			       });

			    },"取消": function() {
			        $( this ).dialog( "destroy" );//注意，不能用close
			    }
			}

		});
		
		$('#dialogApplyForCF').dialog('open');
		
	});
	
}


//取消密友

$('#cancleFollow').click(function(){
	var auidStr = "";
	if (!isnull(selectArr)) {
       for (var i=0;i<selectArr.length;i++) {
           auidStr += (selectArr[i]+",");
       }
    } 
	calcelChums(auidStr);

});

// 取消密友
function calcelChums(auidStr) {
	$('#cancelChumsDialog').dialog({
	    //背景变暗
	    modal: true,
	    autoOpen : false,
	    show : "fade",
	    hide : "fade",
	    width : "300",
	    height : "200",
	    buttons: {
	        "确定": function() {
	            var flag = 0;
	            if ($('#cancelFollow').attr("checked") == "checked") {
                    flag = 1;
                }
	            var fun=function(data){
                    if (data.s == 1) {
                        $("#cancelChumsDialog").dialog("close"); //注意，不能用close
                        searchFriend(page);
                        searchFollowNotFriend();
                        if (flag == 1) {
                            searchFollowGroup();
                            $("#cancelFollow").attr("checked",false);
                        }
                    } else {
                        $().message("取消密友失败，请稍后再试！");
                    }
                    
                     
                };
                exeAjax(ajaxUrl("${aier_url}${aier_urijs}userchumscircle_cancelFriend${aier_suffix}"),
                fun,{
                    "auidStr":auidStr,
                    "flag":flag
                });
	            
	       
	        },"取消": function() {
	            $( this ).dialog( "close" );
	        }
	    }
	});
	
	$('#cancelChumsDialog').dialog('open');

}

// 发私信
function sendLetter(ruid){
	$('#letterDialog').dialog({
	    //背景变暗
	    modal: true,
	    autoOpen : false,
	    show : "fade",
	    hide : "fade",
        width : "300",
        height : "240",
	    buttons: {
	        "确定": function() {
	            var content = $("#letterTextarea").val();
	            if (isnull(content)) {
	                $().message("请输入私信内容！");
	                return;
	            }
	            
	            var fun=function(data){
	                   
	                   if(data.s==1){
	                        $().message("发送成功！");
	                        $("#letterTextarea").val("");
	                        $("#letterDialog").dialog("close");
	                   } else {
	                        $().message("发送失败，请稍后再试！");
	                   }
	               };
	               exeAjax(
	                    ajaxUrl("${aier_url}${aier_urijs}usermessage_sendLetter${aier_suffix}"),
	                    fun,{
	                        "ruid":ruid,
	                        "content":content
	               });
	

	
	        },"取消": function() {
	            $( '#letterDialog' ).dialog( "close" );
	        }
	    }
	});
	
	$('#letterDialog').dialog('open');
}

//新建分组
$('#createGroup').click(function() {
	$('#createGroupDialog').dialog({
	//背景变暗
	modal: true,
	autoOpen : false,
	show : "fade",
	  hide : "fade",
	width : "300",
	height : "200",
	buttons: {
		"确定": function() {
	       
	       var name = $("#groupName").val();
	       if (isnull(name)) {
	           $().message("请输入分组名！");
	           return;
	       }
	       if (fgList != null && fgList.length > 0) {
	           for (var i = 0; i<fgList.length; i++) {
	               if (name == fgList[i].name) {
	                   $().message("已存在相同分组！");
	                   return;
	               }
	           }
	       }
	       var fun=function(data){
	          if(data.s==1){
	              searchFollowGroup();
	              $("#createGroup").val("");
	              $('#createGroupDialog').dialog("close");
	          } else if(data.s == 10001){
	              $().message("已存在相同分组！");
	          } else {
	              $().message("创建失败，请稍后再试！");
	          }
	      };
	      exeAjax(
	           ajaxUrl("${aier_url}${aier_urijs}usermyfollow_addFollowGroup${aier_suffix}"),
	           fun,{
	               "name":name
	      });
	
		},"取消": function() {
			$( this ).dialog( "close" );
			$("#groupName").val("");
		}
	}
	});


	$('#createGroupDialog').dialog("open");
});


</script>
</body>
</html>